<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

<template>
    <div class="times">
        <div class="main">
            <div class="main-top">
                <div id="top-one"></div>
                <div id="top-two"></div>
                <!-- <div id="top-three"></div> -->
            </div>
            <div id="main_buttom"></div>
        </div>
    </div>
</template>

<script>
import  Highcharts from 'highcharts';
import  Exporting from 'highcharts/modules/exporting';
// 初始化导出模块
Exporting(Highcharts);

export default {
    data(){
        return{

        }
    },
    mounted(){
        this.load4()
        this.load1()
        this.load2()
    },
    methods:{
        load2(){
            var chart = Highcharts.chart('top-two',{
            chart: {
                type: 'column'
            },
            title: {
                text: '农大学生风采统计数据'
            },
            subtitle: {
                // text: '数据来源: WorldClimate.com'
            },
            xAxis: {
                categories: [
                    '物联网百科','解决方案','新闻动态','政策解读','经典案例',
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: '篇'
                }
            },
            tooltip: {
                // head + 每个 point + footer 拼接成完整的 table
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y}篇</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    borderWidth: 0
                }
            },
            series: [{
                name: '篇数',
                data: [10, 10, 10, 11, 10 ]
            }]
        });
        },
        load1(){
            // Make monochrome colors and set them as default for all pies
            Highcharts.getOptions().plotOptions.pie.colors = (function () {
                var colors = [],
                    base = Highcharts.getOptions().colors[0],
                    i;
                for (i = 0; i < 10; i += 1) {
                    // Start out with a darkened base color (negative brighten), and end
                    // up with a much brighter color
                    colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
                }
                return colors;
            }());
            // 初始化图表
            var chart = Highcharts.chart('top-one', {
                title: {
                    text: '学生风采文章精华比例'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: '百分占比',
                    data: [
                        ['普通文章',   70.0],
                        // ['50~60',       26.8],
                        {
                            name: '精华文章',
                            y: 30.0,
                            sliced: true,
                            selected: true
                        },
                        
                    ]
                }]
            });
        },

        load4(){
            var chart = Highcharts.chart('main_buttom', {
                chart: {
                    type: 'spline'
                },
                title: {
                    text: '农大学生风采 投稿时间分布'
                },
                subtitle: {
                    // text: '数据来源: WorldClimate.com'
                },
                xAxis: {
                    categories: ['2018年夏季', '2018年秋季', '2018年冬季', '2019年春季', '2019年夏季', '2019年秋季', '2019年冬季', '2020年春季', '2020年夏季', '2020年秋季', '2020年冬季', '2021年春季']
                },
                yAxis: {
                    title: {
                        text: '篇'
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            // 开启数据标签
                            enabled: true          
                        },
                        // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                        enableMouseTracking: false
                    }
                },
                series: [{
                    name: '投稿数量',
                    data: [1, 3, 2, 5, 2, 8, 6, 9, 7, 8, 5, 5]
                }
                
                
                ]
            });
        }
    }
}
</script>

<style scoped>
    .main{
        width: 100%;
        height: 100%;
    }
    .main-top{
        width: 100%;
        height: 50%;
        /* background-color: aquamarine; */
        /* margin: 10px; */
    }
    #main_buttom{
        width: 100%;
        height: 50%;
        /* background-color: cyan; */
    }
    .main-top>div{
        width: 49%;
        height: 100%;
        float: left;
        margin: 0.15%;
    }
    
</style>